<template>
  <div id="comment">
    <div class="comment-title-part">
      <img
        @click="handleClick"
        class="comment-title-img"
        src="../assets/images/视频页面/1.png"
        alt=""
      />
      <span class="comment-title">
        你每天的“状态”，原来是体内这两种激素在操控</span
      >
    </div>
    <div class="comment-banner">
      <span class="comment-banner-content">最新</span>
    </div>
    <div class="comment-content">
      <div class="comment-content-top">
        <van-row>
          <van-col span="12">
            <img
              class="comment-content-top-img"
              src="../assets/images/发现/u1.png"
              alt=""
            />
            <div class="comment-content-top-user">
              <p class="comment-content-top-userspan1">天线宝宝</p>
              <p class="comment-content-top-userspan2">07.09 22:35</p>
            </div>
          </van-col>

          <van-col span="12" class="comment-content-top-right">
            <img
              class="comment-content-top-img2"
              src="../assets/images/发现/d2.png"
              alt=""
            />
          </van-col>
        </van-row>
      </div>
      <div class="comment-content-bottom">
        <div class="comment-usercontent">111111111111111111111111111111</div>
      </div>
    </div>

    <div class="comment-content" v-for="(value, index) in arr" :key="index">
      <div class="comment-content-top">
        <van-row>
          <van-col span="12">
            <img
              class="comment-content-top-img"
              src="../assets/images/发现/u1.png"
              alt=""
            />
            <div class="comment-content-top-user">
              <p class="comment-content-top-userspan1">伟哥老萎了</p>
              <p class="comment-content-top-userspan2">07.09 22:35</p>
            </div>
          </van-col>

          <van-col span="12" class="comment-content-top-right">
            <img
              class="comment-content-top-img2"
              src="../assets/images/发现/d2.png"
              alt=""
            />
          </van-col>
        </van-row>
      </div>
      <div class="comment-content-bottom">
        <div class="comment-usercontent">
          {{ value }}
        </div>
      </div>
    </div>

    <van-cell is-link @click="showPopup" class="showcontent">
      <div class="comment-place-show">
        <van-search
          class="comment-place-write"
          v-model="value1"
          placeholder="留下你的观点"
          shape="round"
          background="#F5F5F5"
        />
      </div>
    </van-cell>
    <van-popup v-model:show="show" click-close-icon @keyup.enter="Keyup">
      <div>
        <!-- <input type="text" > -->
        <textarea
          rows="40"
          v-model="value2"
          class="van-field__control textarea-content"
          placeholder="请输入留言"
          style="height: 72px"
        ></textarea>
      </div>
      <!-- <van-cell-group inset>
        <van-field
          v-model.lazy="state.message"
          rows="3"
          autosize
          type="textarea"
          placeholder="请输入留言"
          border
           @keyup.enter="Keyup"
          
        />
      </van-cell-group> -->

      <div class="comment-place-show2">
        <!-- <Button @click="dianji">发送</Button> -->
        <van-button class="show2button" @click="dianji" type="default"
          >发送</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import "./Comment.css";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const handleClick = () => {
      router.go(-1);
    };
    const value1 = ref("");
    const value2 = ref("");
    const arr = reactive([]);
    const state = ref({
      message: "",
      arr: [],
    });
    // state.arr.push(state.message)
    const dianji = () => {
      console.log(value2);
      if (value2.value) {
        arr.push(value2.value);
        value2.value = "";
        show.value = false;

        router.push("/comment");
      }
    };
    const Keyup = () => {};

    const show = ref(false);
    console.log(show);
    console.log(state);

    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
      value1,
      value2,
      arr,
      Keyup,
      state,
      handleClick,
      dianji,
    };
  },
};
</script>

<style scoped>
#comment {
  margin-top: 20px;
  padding: 0 0 50px 0;
}
.comment-title-part {
  display: flex;
  align-items: center;
  /* padding-top: 22px; */
}
.comment-title {
  display: inline-block;
}
.comment-title-img {
  width: 11px;
  height: 14px;
  margin-right: 14px;
  margin-right: 25px;
  margin-left: 12px;
}
.comment-title {
  width: 250px;
  font-size: 16px;
  font-family: PingFangSC;
  font-weight: 600;
  color: #505050;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comment-banner {
  margin-top: 11px;
  background: #eeecee;

  height: 32px;
}
.comment-banner-content {
  width: 33px;
  text-align-last: justify;
  font-size: 16px;
  font-family: PingFangSC;
  font-weight: 600;
  color: #b1b1b1;
  margin-left: 13px;
}
.comment-content {
  /* height: 100px; */
  padding-top: 20px;
  padding-right: 32px;
  border-bottom: 1px solid #eeecee;
  padding-bottom: 22px;
}
.comment-content-top-user {
  display: inline-block;
}
.comment-content-top-img {
  width: 30px;
  height: 30px;
  margin-left: 13px;
  margin-right: 6px;
}
.comment-content-top-userspan1 {
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: 600;
  color: #414141;
}
.comment-content-top-userspan2 {
  height: 24px;
  line-height: 24px;
  font-size: 10px;
  font-family: PingFangSC;
  font-weight: 600;
  color: #b1b1b1;
}
.comment-content-top-img2 {
  width: 11px;
  height: 11px;
}
.comment-content-top-right {
  display: flex;
  justify-content: flex-end;
}
.comment-usercontent {
  margin-left: 48px;
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: 600;
  color: #040404;
  padding-top: 22px;
  word-wrap: break-word;
  letter-spacing: 1px;
}

.comment-place-show {
  position: fixed;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 52px;
  background: #f5f5f5;
  padding-top: 2px;
}
.showcontent {
  position: fixed;
  left: 0;
  bottom: 0;
}
.comment-place-show2 {
  position: fixed;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 52px;
  background: #f5f5f5;
  padding-top: 2px;
  text-align: end;
  line-height: 52px;
  padding-right: 10px;
}

.comment-place-write {
  background: white;
}
.van-field__control/deep/ {
  background-color: white;
}
.textarea-content {
  width: 300px;
  margin: auto;
  margin-top: 30px;
}
.show2button {
  position: fixed;
  right: 5px;
  bottom: 4px;
}
</style>
